<script setup lang="ts" name="GoodsList">
import { fetchGoodsListData } from '@/api/goods'
import OpLoadingView from '@/components/OpLoadingView.vue'
import OpScrollView from '@/components/OpScrollView.vue'
import GoodsItem from './GoodsItem.vue'
import type { IGood, IMenu } from '@/types'
import { useAsync } from '@/use/useAsync'
import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useCartStore } from '@/stores/cart'
const route = useRoute()
const { id } = route.params
const { pending, data } = useAsync(
  () => fetchGoodsListData(id as string).then((v) => v.data),
  [] as IMenu[]
)


const { setCartItems } = useCartStore()
watch(data, (nv) => {
  const cartGoods = nv
    .reduce((p: IGood[], v: IMenu) => [...p, ...v.goods], [])
    .filter((v) => v.cartCount > 0)

  setCartItems(cartGoods)
  initBoxInfo()
})

const categoryActive = ref(0)
const goodListItemRefs = ref<HTMLElement[]>([])
const scrollRef = ref()
const listScrollTo = ref({
  x: 0,
  y: 0
})
const originScrollTop:number[] = []

const changeCateChange = (v: number) => {
  scrollRef.value.scrollTop = originScrollTop[v]
}
const goodListRef = ref(null);

const initBoxInfo = () => {
  nextTick(() => {
    console.log(goodListItemRefs.value, 'goodListItemRefs'); // 这里你可以访问到所有的 category-name 的 ref
    goodListItemRefs.value!.forEach((el, index) => {

      originScrollTop.push(el.offsetTop);

      const list = document.querySelector('.shop-goods-list .list');
      list!.addEventListener('scroll', handleGoodListScroll);
    });
  });

}
const handleGoodListScroll = (_event: MouseEvent) => {
  const scrollPosition = scrollRef?.value.scrollTop;
  originScrollTop.forEach((top, index) => {
    if (scrollPosition >= top) {
      categoryActive.value = index;
    }
  });
}
onBeforeUnmount(() => {
  const list = document.querySelector('.shop-goods-list .list');
  list!.removeEventListener('scroll', handleGoodListScroll);
})
</script>

<template>
  <OpLoadingView :loading="pending" type="skeleton">
    <div class="shop-goods-list">
      <VanSidebar class="sidebar" v-model="categoryActive" @change="changeCateChange">
        <OpScrollView :data="data">
          <VanSidebarItem ref="cateRefs" v-for="v in data" :key="v.label" :title="v.label"></VanSidebarItem>
        </OpScrollView>
      </VanSidebar>
      <div class="list" ref="scrollRef">
        <OpScrollView :data="data" ref="goodListRef" >
          <template v-for="(v, index) in data" :key="v.label">
            <div>
              <div class="category-name" :ref="el => { if (el) goodListItemRefs[index] = el }">{{ v.label }}</div>
              <GoodsItem v-for="cv in v.goods" :key="cv.id" :data="cv" />
            </div>
          </template>
        </OpScrollView>
      </div>
    </div>
  </OpLoadingView>
</template>

<style lang="scss" scoped>
.shop-goods-list {
  --van-sidebar-selectes-boder-color: none;
  --van-sidebar-padding: 14px var(--van-padding-sm);
  --van-sidebar-font-size: 13px;
  display: flex;
  height: 100%;
  // height: 480px;

  .sidebar {
    overflow: auto;
  }

  .list {
    flex: 1;
    margin: 0 10px;
    position: static;
    overflow: scroll;
    .category-name {
      font-size: 15px;
      font-weight: bold;
      padding: 10px 0;
      line-height: 1.2;
      background: white;
      z-index: 1;
      width: 100%;
      position: sticky;
      top: 0;
    }

  }
}
</style>
